<template>
  <view class="button-group" :class="[`button-group--${align}`, `button-group--${size}`]">
    <slot />
  </view>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  props: {
    align: {
      type: String,
      default: 'left',
    },
    size: {
      type: [String, Number],
      default: 'md', //sm 16 md 24 lg 32 xl 48
    },
  },
  setup() {
    return {}
  },
})
</script>
<style lang="scss" scoped>
.button-group {
  &--left {
    text-align: left;
  }
  &--center {
    text-align: center;
  }
  &--right {
    text-align: right;
  }
}
</style>
